<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" th:text="${report.name}"></h4>
</div>

<div class="modal-body">
    <!--这里通过所属的项目的id找到相对应的设备电量统计数据-->
    <input type="hidden" id="id" th:value="${report.projectId}">
    <!--电量统计数据-->
    <div id="chartmain" style="width:1050px ; height: 300px"></div>
    <!--故障信息-->
    <div id="main" style="width: 400px;height:200px;"></div>
    <!--table请求-->
    <div id="data">
        <table id="dataTables" data-url="/report/report_alarm_data"
               data-page-list=[] data-striped="true" data-pagination="true"
               data-page-size="2" data-cache="false">
        </table>
    </div>
    <!--清除浮动-->
    <div class="clearfloat"></div>
    <!--收益表及环保贡献-->
    <div id="environmental">
        <fieldset style="margin-right: 10px; height: 150px; width: 950px; overflow-x: hidden">
            <legend><b>收益表及环保贡献</b></legend>
            <div class="col-sm-6" th:each="reports : ${reportLists}">
                <label class="col-sm-5" th:text="${reports.name}"></label>
                <span class="col-sm-5"
                      th:text="${reports.value==null?'暂无数据':#numbers.formatDecimal({reports.value}, 1, 2)}">
                            </span>
                <span class="col-sm-2" th:text="${reports.unit}"></span>
            </div>
        </fieldset>
    </div>
    <!--诊断信息统计-->
    <div id="tableTearnings">
        <table class="table table-bordered">
            <b style="font-size: 20px">诊断信息统计</b>
            <thead>
            <tr>
                <th colspan="2">1#电池包参量</th>
                <th>诊断数值</th>
                <th>相对变化量</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td colspan="2">电池包容量（Ah）</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="2">最大单体电池阻值（mΩ）</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="2">本月循环次数（次）</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td id="tdc" align="center" rowspan="6">电池一致性分析</td>
                <td>SOC标准差</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>单体SOC标准差</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <!--  <td align="center" rowspan="4" valign="center">电池一致性分析</td>-->
                <td>单体电压标准差</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>单体阻值标准差</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>单体容量标准差</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>温度标准差</td>
                <td></td>
                <td></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div id="field">
        <!--SOC校正及单体SOC分布-->
        <fieldset style="float: left; width: 49%">
            <legend>SOC校正及单体SOC分布</legend>
            <!--SOC图-->
            <div id="soc_correcting" style="height:300px;width: 413px; margin-top: 10px"></div>
        </fieldset>
        <!--单体阻值分布-->
        <fieldset style="float: right; width: 49%">
            <legend>单体阻值分布</legend>
            <!--SOC图-->
            <div id="dcir_correcting" style="height:300px; width: 413px; margin-top: 10px"></div>
        </fieldset>
    </div>
    <!--系统评价及日期的显示-->
    <div id="evaluate">
        <b style="font-size: 20px">储能系统评价</b>
        <textarea style="height:60px" class="form-control"></textarea>
        <div style="margin-top: 30px">
            <b style="font-size: 15px">生成日期:</b>
            <!--<span th:text="${report.createTime}"></span>-->
            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            <b style="font-size: 15px">审核人:</b>
            <span></span>
            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            <b style="font-size: 15px">复审人:</b>
            <span></span>
            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            <b style="font-size: 15px">联系方式:</b>
            <span></span>
        </div>

    </div>

</div>

<style>
    .modal-body {
        height: 1650px;
    }

    #main {
        float: left;
    }

    #data {
        margin-right: 50px;
        margin: 20px;
        width: 520px;
        float: right;
    }

    .clearfloat {
        clear: both;
    }

    #environmental {
        width: 950px;
        height: 150px;
        margin-bottom: 20px;
    }

    fieldset.col-xs-7 span.col-sm-2 {
        padding: 5px 0 0 5px;
    }

    fieldset.col-xs-7 span.col-sm-2 span.col-sm-8 {
        padding: 0;
    }

    #tableTearnings {
        width: 950px;
        height: 400px;

    }

    #evaluate {
        margin-top: 20px;
        width: 950px;
        height: 200px;
    }

    #field {
        width: 950px;
        height: 200px;
    }

    #tdc {
        vertical-align: middle;
        text-align: center;
    }
</style>

<script>
    $(function () {
        /**
         * 诊断分析 SOC校正及单体SOC分布
         */
        soc_correcting();
        /**
         * 诊断分析 单体阻值分布
         */
        dcir_correcting();

        /**
         * 诊断分析 SOC校正及单体SOC分布
         */
        function soc_correcting() {
            var soc_correcting = echarts.init(document.getElementById('soc_correcting'));
            soc_correcting.setOption({
                title: {                // 标题
                    left: 'center',
                    y: '80%',
                    text: '单体SOC 频率/频数分布图'
                },
                grid: {                 // 设置边距
                    left: '0%',
                    right: '2%',
                    bottom: '25%',
                    containLabel: true  // 是否包含显示的刻度
                },
                tooltip: {              // 提示框组件
                    trigger: 'axis'     // 触发类型 axis坐标轴触发
                },
                legend: {               // 图例
                    data: ['频数', '频率'],
                    show: false
                },
                xAxis: {                // x轴
                    type: 'category',
                    boundaryGap: true,  //坐标轴两边留白，如果是false就是0点在y轴上
                    data: ['0%', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%']
                },
                yAxis: [
                    {
                        name: '频数',
                        type: 'value',
                        boundaryGap: true,
                        min: 0,
                        max: function (value) {
                            return value.max + 5;
                        },
                        splitLine: {        // 刻度线
                            show: false     // 是否显示刻度线
                        }
                    },
                    {
                        name: '频率',
                        type: 'value',
                        boundaryGap: true,
                        min: 0,
                        max: 100,
                        axisLabel: {
                            formatter: '{value} %'
                        },
                        splitLine: {        // 刻度线
                            show: false     // 是否显示刻度线
                        }
                    }
                ],
                series: [
                    {
                        name: '频数',
                        type: 'line',
                        data: [32, 34, 23, 52, 32, 34]
                    },
                    {
                        name: '频率',
                        type: 'bar',
                        yAxisIndex: 1,
                        data: [23, 12, 34, 53, 51, 21]
                    }
                ]
            });
            $.post("/report/soc_correcting", {id: $("#id").val()}, function (json) {
                // 1. 设置图表
                soc_correcting.setOption({
                    series: [
                        {
                            name: '频数',
                            data: Object.keys(json.frequency).sort(function (a, b) {
                                var a_value = a.replace("%", "").valueOf();
                                var b_value = b.replace("%", "").valueOf();
                                return a_value - b_value;
                            }).map(function (key) {
                                return json.frequency[key];
                            })
                        },
                        {
                            name: '频率',
                            data: Object.keys(json.rate).sort(function (a, b) {
                                var a_value = a.replace("%", "").valueOf();
                                var b_value = b.replace("%", "").valueOf();
                                return a_value - b_value;
                            }).map(function (key) {
                                return json.rate[key];
                            })
                        }
                    ]
                });
            });

        }

        /**
         * 诊断分析 单体阻值分布
         */
        function dcir_correcting() {
            var dcir_correcting = echarts.init(document.getElementById('dcir_correcting'));
            dcir_correcting.setOption({
                title: {                // 标题
                    left: 'center',
                    y: '80%',
                    text: '单体阻值频数/频率分布图'
                },
                grid: {                 // 设置边距
                    left: '0%',
                    right: '2%',
                    bottom: '25%',
                    containLabel: true  // 是否包含显示的刻度
                },
                tooltip: {              // 提示框组件
                    trigger: 'axis'     // 触发类型 axis坐标轴触发
                },
                legend: {               // 图例
                    data: ['频数', '频率'],
                    show: false
                },
                xAxis: {                // x轴
                    type: 'category',
                    boundaryGap: true,  //坐标轴两边留白，如果是false就是0点在y轴上
                    data: ['0%', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%']
                },
                yAxis: [
                    {
                        name: '频数',
                        type: 'value',
                        boundaryGap: true,
                        min: 0,
                        max: function (value) {
                            return value.max + 5;
                        },
                        splitLine: {        // 刻度线
                            show: false     // 是否显示刻度线
                        }
                    },
                    {
                        name: '频率',
                        type: 'value',
                        boundaryGap: true,
                        min: 0,
                        max: 100,
                        axisLabel: {
                            formatter: '{value} %'
                        },
                        splitLine: {        // 刻度线
                            show: false     // 是否显示刻度线
                        }
                    }
                ],
                series: [
                    {
                        name: '频数',
                        type: 'line',
                        data: [23, 4, 32, 44, 54, 75, 32, 23, 12, 23]
                    },
                    {
                        name: '频率',
                        type: 'bar',
                        yAxisIndex: 1,  // 使用第二个Y轴
                        data: [7, 65, 43, 21, 23, 56, 34, 54, 43]
                    }
                ]
            });
            $.post("/report/dcir_correcting", {id: $("#id").val()}, function (json) {
                // 1. 设置图表
                dcir_correcting.setOption({
                    series: [
                        {
                            name: '频数',
                            data: Object.keys(json.frequency).sort().map(function (key) {
                                return json.frequency[key];
                            })
                        },
                        {
                            name: '频率',
                            data: Object.keys(json.rate).sort().map(function (key) {
                                return json.rate[key];
                            })
                        }
                    ]
                });
                // 2. 设置更新的值
                $("#dcir_correcting").parent().find("span.time_value").text(json.time_value);
            })
        }

        alarm_scale();

        function alarm_scale() {

            // 故障信息图表。
            var alarmScale = echarts.init(document.getElementById('main'));
            alarmScale.setOption({
                title: {
                    text: '故障信息'
                }, tooltip: {
                    trigger: 'item',
                    formatter: '{b} :{c}({d}%)'
                },
                series: {
                    type: 'pie',
                    label: {
                        normal: {
                            position: 'inner'
                        }
                    },
                    data: [{name: '一级', value: 1212},
                        {name: '二级', value: 2323},
                        {name: '三级', value: 1919},
                        {name: '四级', value: 342}]
                }
            });
            alarmScale.showLoading();
            $.get("/report/alarm_scale", {id: $("#id").val()}, function (callback) {
                console.log(callback);
                alarmScale.hideLoading();
                // 填入数据
                alarmScale.setOption({
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '',
                        data: callback
                    }]
                });

            })
        }

    });
    /**
     * 定义月报中的电量和电费
     * */
    electricity_statistics();

    function electricity_statistics() {
        //初始化电量图表echarts实例
        var myChart = echarts.init(document.getElementById('chartmain'));
        //使用制定的配置项和数据显示图表
        myChart.setOption({
            title: {
                text: '电量统计数据'
            }, toolbox: {
                show: true
            },
            tooltip: {
                trigger: "item"
            },
            legend: {},
            xAxis: {
                data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18",
                    "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"]
            },
            yAxis: {},
            series: [{
                name: '累计节省电费',
                type: 'line',
                color: 'green',
                data: [500, 200, 360, 100, 32, 433, 232, 113, 134, 552]
            },
                myChart.showLoading(),
                $.get("/report/electricity_spare", {id: $("#id").val()}, function (callback) {
                    console.log(callback);
                    myChart.hideLoading();
                    //设置图表的值
                    series: [{
                        name: "累计节省电费",
                        data: callback
                    }]
                }),
                {
                    name: '累计充电量',
                    type: 'bar',
                    data: [343, 324, 22, 342, 553, 123, 34, 422, 231]
                }, myChart.showLoading(),
                $.get("/report/electricity_battery_charging", {id: $("#id").val()}, function (callback) {
                    console.log(callback);
                    myChart.hideLoading();
                    //设置图表的值
                    series: [{
                        name: "累计充电量",
                        data: callback
                    }]
                }),
                {
                    name: '累计放电量',
                    type: 'bar',
                    data: [312, 314, 22, 333, 553, 123, 34, 232, 231]
                }, myChart.showLoading(),
                $.get("/report/electricity_battery_discharge", {id: $("#id").val()}, function (callback) {
                    console.log(callback);
                    myChart.hideLoading();
                    //设置图表的值
                    series: [{
                        name: "累计放电量",
                        data: callback
                    }]
                })]
        });
    }


    /************Table字段********************/
        //table字段
    var dataFormat = [{
            field: 'createTime',
            title: '开始时间',
            align: 'center',
            formatter: function (value, row, index) {
                return formatTimeStrap(value);
            }
        }, {
            field: 'equipmentName',
            title: '报警设备',
            align: 'center'
        }, {
            field: 'alarmContent',
            title: '报警内容',
            align: 'center'
        }, {
            field: 'alarmLev',
            align: 'center',
            title: '报警等级',
            formatter: formatLev
        }, {
            field: 'source',
            align: 'center',
            title: '来源'
        }, {
            field: 'state',
            align: 'center',
            title: '状态',
            formatter: formatState
        }];

    function formatLev(value, row, index) {
        if (value == 0) {
            return "无告警";
        } else if (value == 1) {
            return "一级告警"
        } else if (value == 2) {
            return "二级告警"
        } else if (value == 3) {
            return "三级告警"
        } else if (value == 4) {
            return "四级告警"
        } else {
            return ['<span>未定义告警等级-</span>'] + value
        }
    }

    function formatState(value, row, index) {
        if (value == 1) {
            return "";
        }
        if (value == 2) {
            return "已确认未处理";
        }
        if (value == 3) {
            return "已处理并作废";
        }
    }

    getTable(dataFormat, "dataTables");

    function getTable(dataFormat, id) {

        $("#" + id).bootstrapTable({
            method: "get",
            sidePagination: "server",
            dataType: "json",
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    pageNum: params.offset / params.limit
                };
                return param;
            },
            columns: dataFormat
        });
    }

</script>